<template>
  <el-row>
    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
      <div class="grid-content">
        <bar-chart :chart-data="rankData" :data-reverse="true" title="新闻广告" tool-name="播放次数" color="#99a9bf" x-type="value" y-type="category" num-position="inside"/>
      </div>
    </el-col>
    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
      <div class="grid-content">
        <bar-chart :chart-data="typeData" title="视频喜好分析" tool-name="影片类型" color="#E6D2C9" bar-width="30"/>
      </div>
    </el-col>
    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
      <div class="grid-content">
        <map-chart :chart-data="mapData" title="用户分布图" tool-name="用户量"/>
      </div>
    </el-col>
    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
      <div class="grid-content">
        <pie-chart :chart-data="pieData" title="影片清晰度占比" tool-name="人数"/>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import BarChart from '@/components/Charts/barChart'
import MapChart from '@/components/Charts/mapChart'
import PieChart from '@/components/Charts/pieChart'

export default {
  components: {
    BarChart,
    MapChart,
    PieChart
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      rankData: [],
      typeData: [],
      mapData: [],
      pieData: []
    }
  },
  watch: {
    data(val) {
      this.rankData = this.data.movies
      this.typeData = this.data.movieTypes
      this.mapData = this.data.provinces
      this.pieData = [
        { value: 335, name: '蓝光' },
        { value: 310, name: '超清' },
        { value: 234, name: '高清' },
        { value: 135, name: '标清' },
        { value: 1548, name: '流畅' }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.grid-content{
    height:350px;
    background:#fff;
    padding: 10px 10px 0;
    margin: 0px 10px 20px 10px;
  }
</style>
